<template>
    <div class="c-list">
        <div class="c-item" v-for="item in dataList" :key="item.id">
            <div class="item-l"><img :src="item.vartar"></div>
            <div class="item-m">
                <p class="name"><a href="javascript:;">{{ item.name }}</a></p>
                <ul>
                    <li><a href="javascript:;">动态<span>{{ item.events }}</span></a></li>
                    <li class="line">|</li>
                    <li><a href="javascript:;">关注<span>{{ item.follows }}</span></a></li>
                    <li class="line">|</li>
                    <li><a href="javascript:;">粉丝<span>{{ item.fans }}</span></a></li>
                </ul>
                <p class="desc">{{ item.desc }}</p>
            </div>
            <div class="item-r">
                <div v-if="item.isFollow" class="is-follow">
                    <a href="javascript:;"><span>发私信</span></a>
                    <p><i></i>已关注</p>
                </div>
                <div v-else class="no-follow">
                    <a href="javascript:;">关 注</a>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        dataList: Array
    }
}
</script>

<style lang="less" scoped>
    .c-list {
        display: flex;
        flex-wrap: wrap;
        .c-item {
            display: flex;
            width: 50%;
            padding: 20px;
            box-sizing: border-box;
            border: 1px solid #d5d5d5;
            border-top: none;
            .item-l {
                img {
                    width: 60px;
                    height: 60px;
                }
            }
            .item-m {
                flex: 1;
                margin-left: 10px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                .name {
                    a {
                        display: inline-block;
                        max-width: 235px;
                        font-size: 14px;
                        font-weight: 400;
                        color: #0c73c2;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        word-wrap: normal;
                        &:hover {
                            color: #0c73c2 !important;
                        }
                    }
                }
                ul {
                    display: flex;
                    a {
                        color: #333;
                        span {
                            color: #0c73c2;
                        }
                        &:hover {
                            color: #333 !important;
                        }
                    }
                    .line {
                        margin: 0 10px;
                    }
                }
                .desc {
                    max-width: 235px;
                    font-weight: 400;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    word-wrap: normal;
                }
            }
            .item-r {
                padding-top: 5px;
                width: 75px;
                .is-follow {
                    a {
                        display: block;
                        width: 75px;
                        height: 31px;
                        background: url(../../assets/images/button.png) no-repeat 0 -810px;
                        span {
                            display: inline-block;
                            height: 29px;
                            line-height: 29px;
                            padding-left: 30px;
                            color: #333;
                        }
                    }
                    p {
                        margin-top: 5px;
                        color: #999;
                        text-align: center;
                        i {
                            margin-right: 3px;
                            display: inline-block;
                            width: 13px;
                            height: 10px;
                            background: url(../../assets/images/icon.png) no-repeat -60px -470px;
                        }
                    }
                }
                .no-follow {
                    a {
                        display: block;
                        width: 40px;
                        height: 31px;
                        padding-left: 30px;
                        background: url(../../assets/images/button.png) no-repeat 0 -720px;
                        color: #fff;
                        line-height: 30px;
                        &:hover {
                            text-decoration: none;
                        }
                    }
                }
            }
            &:nth-child(2n) {
                border-left: none;
            }
        }
    }
</style>